<template lang="">
  <div>
    <div>
      <span style="color: #66A4D7;">竞价大厅</span>
      <span style="margin-left: 10px;margin-right:10px;">>></span>
      <span>竞价列表</span>
    </div>
    <div class="industry_and_region">
      <div class="industry">
        <div class="industry_one">行业</div>
        <div class="industry_two">
          <span class="industry_two_one">不限</span>
          <span class="industry_two_two">二手设备</span>
          <span class="industry_two_two">再生资源</span>
          <span class="industry_two_two">废旧资源</span>
          <span class="industry_two_two">危废</span>
          <span class="industry_two_two">旧货</span>
        </div>
      </div>
      <div class="region">
        <div class="region_one">地区</div>
        <div class="region_two">
          <span class="region_two_one">不限</span><span class="region_two_two">河南</span><span class="region_two_two">北京</span>
          <span class="region_two_two">广东</span><span class="region_two_two">上海</span><span class="region_two_two">陕西</span>
          <span class="region_two_two">山东</span><span class="region_two_two">湖南</span><span class="region_two_two">四川</span>
          <span class="region_two_two">浙江</span><span class="region_two_two">辽宁</span><span class="region_two_two">安徽</span>
          <span class="region_two_two">河北</span><span class="region_two_two">福建</span>
          <span class="region_two_two">江苏</span><span class="region_two_two">湖北</span>
        </div>
      </div>
      <div class="region">
        <div class="region_one">竞买状态</div>
        <div class="region_two">
          <span class="region_two_one">全部</span>
          <span class="region_two_two">待开始</span>
          <span class="region_two_two">竞买中</span>
          <span class="region_two_two">已结束</span>
          <span class="region_two_two_search_for">
            <span class="region_two_two_search_for_one">
              <i class="el-icon-search"></i>
              <el-input v-model="aaa" class="input" placeholder="请输入关键词" clearable></el-input>
            </span>
            <span style="width: 50px;height:40px;">
              <el-button style="border: 1px solid #000;position: relative;top: -1px;">搜索</el-button>
            </span>
          </span>
        </div>
      </div>
    </div>
    <div class="hot_material_transaction">
      <div class="div1">
          <el-image @click="jumpToBiddingList" class="img" :src="src"></el-image>
          <div style="height: 33px;width: 360px;background-color: #F2F2F2;line-height: 33px;margin-left: 20px;">
            <span class="begin_in_a_minute">即将开始</span>
            <span class="shijian"><i style="margin-right: 5px;" class="el-icon-timer"></i>5天22小时16分</span>
          </div>
          <div style="margin-top: 20px; margin-left: 20px;">
            <span style="color: grey;">起拍价：</span><span style="color: red;">￥159.800</span>
            <p>名称</p>
            <div style="width: 285px;float: left;">北京市昌平区</div>
            <img class="huo" src="../assets/huo.png">
            <div style="width: 70px;float: right;">111</div>
          </div>
      </div>
      <div class="div2">
        <el-image class="img" :src="src1"></el-image>
        <div style="height: 33px;width: 360px;background-color: #F2F2F2;line-height: 33px;margin-left: 20px;">
          <span class="begin_in_a_minute">即将开始</span>
          <span class="shijian"><i style="margin-right: 5px;" class="el-icon-timer"></i>5天22小时16分</span>
        </div>
        <div style="margin-top: 20px; margin-left: 20px;">
          <span style="color: grey;">起拍价：</span><span style="color: red;">￥159.800</span>
          <p>名称</p>
          <div style="width: 285px;float: left;">北京市昌平区</div>
          <img class="huo" src="../assets/huo.png">
          <div style="width: 70px;float: right;">111</div>
        </div>
      </div>
      <div class="div3">
        <el-image class="img" :src="src2"></el-image>
        <div style="height: 33px;width: 360px;background-color: #F2F2F2;line-height: 33px;margin-left: 20px;">
          <span class="begin_in_a_minute2">竞拍中</span>
          <span class="shijian"><i style="margin-right: 5px;" class="el-icon-timer"></i>5天22小时16分</span>
        </div>
        <div style="margin-top: 20px; margin-left: 20px;">
          <span style="color: grey;">起拍价：</span><span style="color: red;">￥159.800</span>
          <p>名称</p>
          <div style="width: 285px;float: left;">北京市昌平区</div>
          <img class="huo" src="../assets/huo.png">
          <div style="width: 70px;float: right;">111</div>
        </div>
      </div>
      <div class="div4">
        <el-image class="img" :src="src3"></el-image>
        <div style="height: 33px;width: 360px;background-color: #F2F2F2;line-height: 33px;margin-left: 20px;">
          <span class="begin_in_a_minute3">已结束</span>
          <span class="shijian"><i style="margin-right: 5px;" class="el-icon-timer"></i>5天22小时16分</span>
        </div>
        <div style="margin-top: 20px; margin-left: 20px;">
          <span style="color: grey;">起拍价：</span><span style="color: red;">暂定</span>
          <p>名称</p>
          <div style="width: 285px;float: left;">北京市昌平区</div>
          <img class="huo" src="../assets/huo.png">
          <div style="width: 70px;float: right;">111</div>
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[4, 8, 12, 16]"
      :page-size="4"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" style="margin-top: 20px;float: left;">
    </el-pagination>
    <div class="QR_code">
      <div class="QR_code_one">
        <div style="width: 40%;height: 200px;margin-left: 10%;float: left;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u561.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信服务号</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">一手消息随时掌握</span>
        </div>
        <div style="width: 40%;height: 200px;float: left;margin-left: 10%;">
          <img style="float: left;margin-top: 37px;" src="https://img.axureshop.com/5f/7a/2f/5f7a2fd7263e4e95897c8cd096b23108/images/%E9%A6%96%E9%A1%B5/u564.svg">
          <div style="float: left;margin-left: 10px;font-size: 18px;margin-top: 50px;">微信小程序</div>
          <span style="margin-left: -87px;margin-top: 100px;float: left;font-size: 14px;">随时随地交易</span>
        </div>
      </div>
      <div class="QR_code_two">
        <p style="margin-top: 47px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="margin-right: 50px;font-size: 14px;">增值电信业务经营许可证沪B</span>
          <span style="font-size: 14px;">全国免费服务热线：400-886-0000</span>
        </p>
        <p style="margin-top: 30px;">
          <span style="margin-right: 50px;font-size: 14px;">沪ICP备XXXXXXXX号</span>
          <span style="font-size: 14px;">增值电信业务经营许可证沪B</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      aaa: '',
      src: 'https://img2.baidu.com/it/u=1263362608,1866954010&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
      src1: 'https://img1.baidu.com/it/u=632140435,3324232156&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=480',
      src2: 'https://img0.baidu.com/it/u=1579838767,3879862757&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
      src3: 'https://img1.baidu.com/it/u=278828703,1241638232&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
      currentPage4: 1, // 分页显示第几页
      pageRequest: { // 分页请求参数
        pageSize: 4, // 每页条数
        pageNum: 1 // 每页数量
      },
      total: 0 // 分页总条数
      // zhuangtai: {
      //   beginInAMinute: false, // 即将开始
      //   bidding: true, // 竞拍中
      //   closed: false // 已结束
      // },
      // bZJ: {
      //   paid: false, // 已交保证金
      //   unpaid: true // 未交保证金
      // },
      // token: 1
    }
  },
  mounted () {
    // if (this.token !== '') {
    //   if (this.zhuangtai.beginInAMinute === true) {
    //     if (this.bZJ.paid) {
    //       this.bZJ.paid = true
    //     } else {
    //       this.bZJ.paid = false
    //     }
    //   } else if (this.zhaungtan.bidding === true) {
    //     if (this.bZJ.paid === 1) {
    //       alert('已交保证金')
    //     } else {
    //       alert('未交保证金')
    //     }
    //   } else {
    //     alert('已结束')
    //   }
    // } else {
    //   alert('未登录')
    // }
  },
  methods: {
    jumpToBiddingList () { // 点击竞价图片跳转竞价详情页面
      this.$router.push('/bidView')
    },
    handleSizeChange (val) { // 改变每页条数
      this.pageRequest.pageSize = val
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageRequest.pageNum = val
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .input{
    width: 184px;
    position: relative;
    top: -1px;
  }
  /deep/.el-input__inner{
    border-style:none

  }
  .region_two_two_search_for_one{
    border-bottom: 1px solid #000;
    float: left;
    width: 200px;
    height: 40px;
    line-height: 40px;
    margin-top: 14px;
  }
  .region_two_two_search_for{
    float: right;
    margin-right:20px;
    width: 272px;
    height: 70px;
  }
  .industry_two_two{
    margin-left: 40px;
  }
  .region_two_two{
    margin-left: 40px;
  }
  .industry_two_one{
    margin-left: 40px;
    color: red;
  }
  .region_two_one{
    margin-left: 40px;
    color: red;
  }
  .industry_two{
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    line-height: 70px;
    float: right;
    width: 1680px;
    height: 70px;
    background-color: #FFFFFF;
  }
  .region_two{
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    line-height: 70px;
    float: right;
    width: 1680px;
    height: 70px;
    background-color: #FFFFFF;
  }
  .industry_one{
    background-color: #F2F2F2;
    border: 1px solid #000;
    text-align: center;
    line-height: 70px;
    float: left;
    width: 180px;
    height: 70px;
  }
  .region_one{
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    text-align: center;
    line-height: 70px;
    float: left;
    width: 180px;
    height: 70px;
    background-color: #F2F2F2;
  }
  .region{
    width: 100%;
    height: 70px;
  }
  .industry{
    width: 100%;
    height: 72px;
  }
  .industry_and_region{
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
    height: 213px;
  }
  .flow_path_three_head_sculpture{
    border-width: 0px;
    position: relative;
    left: 85px;
    top: -117px;
    width: 80px;
    height: 80px;
  }
  .flow_path_three_img{
    margin-left: 50px;
    margin-top: 78px;
    width: 150px;
    height: 150px;
  }
  .flow_path_two_weituo{
    color: grey;
    margin-left: 40px;
    margin-top: 70px;
    width: 800px;
    height: 100px;
  }
  .flow_path_two_address{
    float:left;
    margin-left: 30px;
    width: 50px;
    height: 63px;
    line-height: 63px;
  }
  .flow_path_two_phone{
    float:left;
    margin-left: 40px;
    width: 544px;
    height: 63px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(204, 204, 204, 1);
    border-radius: 7px;
    box-shadow: none;
  }
  .flow_path_img{
    margin-top: 20px;
    margin-left: 50px;
    width: 100px;
    height: 100px;
  }
  .flow_path_two_p{
    font-size: 20px;
    margin-top: 25px;
    margin-left: 60px;
  }
  .flow_path_p{
    font-size: 20px;
    margin-top: 25px;
    margin-left: 40px;
  }
  .flow_path_three{
    float: left;
    height: 300px;
    width: 250px;
  }
  .flow_path_two{
    float: left;
    height: 300px;
    width: 900px;
  }
  .flow_path_one{
    float: left;
    height: 300px;
    width: 700px;
  }
  .flow_path{
    margin-top: 10px;
    width: 100%;
    height: 300px;
    background-color: #fff;
  }
  .huo{
    margin-top: 1px;
    width: 20px;
  }
  .shijian{
    float: right;
    margin-right: 20px;
  }
  .begin_in_a_minute2{
    float: left;
    width: 100px;
    text-align: center;
    height: 33px;
    background-color: #FF6633;
    line-height: 33px;
  }
  .begin_in_a_minute3{
    float: left;
    width: 100px;
    text-align: center;
    height: 33px;
    background-color: #999999;
    line-height: 33px;
  }
  .begin_in_a_minute{
    float: left;
    width: 100px;
    text-align: center;
    height: 33px;
    background-color: #008000;
    line-height: 33px;
  }
  .img{
    width: 360px;
    height: 240px;
    margin-left: 20px;
    margin-top: 20px;
  }
  .div4{
    float: left;
    margin-left: 50px;
    width: 400px;
    height: 440px;
  }
  .div3{
    float: left;
    margin-left: 50px;
    width: 400px;
    height: 440px;
  }
  .div2{
    float: left;
    margin-left: 50px;
    width: 400px;
    height: 440px;
  }
  .div1{
    float: left;
    margin-left: 50px;
    width: 400px;
    height: 440px;
  }
  .hot_material_transaction{
    float: left;
    margin-top: 20px;
    width: 100%;
    background-color: #fff;
  }
  .QR_code_two{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code_one{
    float: left;
    width: 50%;
    height: 200px;
  }
  .QR_code{
    margin-top: 50px;
    float: left;
    width: 100%;
    height: 240px;
  }
</style>
